<template>
  <div class="vm-details-container">
    <vm-common-header
      :pageTitle="objtype"
      :goBack="goBack"></vm-common-header>
    <div class="vm-commonDetails-container" ref="commonDetails">
      <div class="content">
        <!-- 是否显示prompt -->
        <div class="vm-header-prompt" v-if="prompt == true">
          <h6>请去网站参与招标报价</h6>
        </div>

        <!-- 新闻详情  -->
        <ul class="vm-notice-warp" v-if="objtype == '新闻详情'">
          <li>
            <h6>项目编号</h6>
            <p>{{ commonDetailsData.noticeTitle }}</p>
          </li>
          <div v-html="commonDetailsData.noticeContent"></div>
        </ul>
        <!-- 供应商详情 -->

        <ul class="vm-notice-warp" v-if="objtype == '供应商详情'">
          <li>
            <h6>公司名称</h6>
            <p>{{ commonDetailsData.cCompanyName }}</p>
          </li>
          <li>
            <h6>公司地址</h6>
            <p>{{ commonDetailsData.cAddress }}</p>
          </li>
          <li>
            <h6>成立时间</h6>
            <p>{{ commonDetailsData.dCreateDate }}</p>
          </li>
          <li>
            <h6>注册资本</h6>
            <p>{{ commonDetailsData.fRegisteredCapital }}</p>
          </li>
          <li>
            <h6>联系人</h6>
            <p>{{ commonDetailsData.cPersonName }}</p>
          </li>
          <li>
            <h6>联系方式</h6>
            <p>{{ commonDetailsData.cPersonMobile }}</p>
          </li>
          <li>
            <h6>邮箱</h6>
            <p>{{ commonDetailsData.cMail }}</p>
          </li>
          <li>
            <h6>第二联系人</h6>
            <p>{{ commonDetailsData.cPersonNameBackup }}</p>
          </li>
          <li>
            <h6>联系方式</h6>
            <p>{{ commonDetailsData.cPersonMobileBackup }}</p>
          </li>
          <li>
            <h6>税号</h6>
            <p>{{ commonDetailsData.cRegCode }}</p>
          </li>
          <li>
            <h6>开户行</h6>
            <p>{{ commonDetailsData.cBankID }}</p>
          </li>
          <li>
            <h6>账号</h6>
            <p>{{ commonDetailsData.cAccount }}</p>
          </li>
          <li>
            <h6>开票地址</h6>
            <p>{{ commonDetailsData.invoiceAdd }}</p>
          </li>
          <li>
            <h6>电话</h6>
            <p>{{ commonDetailsData.cLPersonMobile }}</p>
          </li>
          <li class="vm-material">
            <h6>主营物资</h6>
            <div class="vm-material-warp">
              <h5 v-for="(item, key) in commonDetailsData.matrial" :key="key">{{ item }}</h5>
            </div>
          </li>
        </ul>
        <!-- 设备工艺审批 -->

        <ul class="vm-notice-warp" v-if="objtype == '设备工艺审批'">
          <li>
            <h6>设备编码</h6>
            <p>{{ commonDetailsData.cProductCode }}</p>
          </li>
          <li>
            <h6>设备名称</h6>
            <p>{{ commonDetailsData.cProductName }}</p>
          </li>
          <li>
            <h6>责任人</h6>
            <p>{{ commonDetailsData.realname }}</p>
          </li>
          <li>
            <h6>设备用途</h6>
            <p>{{ commonDetailsData.deviceUsage }}</p>
          </li>
          <li>
            <h6>供货单位</h6>
            <p>{{ commonDetailsData.cConUnitName }}</p>
          </li>
          <li>
            <h6>联系人</h6>
            <p>{{ commonDetailsData.cFirstPpartyPerson }}</p>
          </li>
          <li>
            <h6>手机号</h6>
            <p>{{ commonDetailsData.cFirpartyPersonPhone }}</p>
          </li>
          <li>
            <h6>电话</h6>
            <p>{{ commonDetailsData.cFirpartyPersonTel }}</p>
          </li>
          <li>
            <h6>邮件</h6>
            <p>{{ commonDetailsData.cFirpartyPersonEmail }}</p>
          </li>
          <li>
            <h6>厂家地址</h6>
            <p>{{ commonDetailsData.cConUnitName }}</p>
          </li>
          <li class="vm-material" v-for="(item, key) in commonDetailsData.part" :key="key">
            <h6>部位信息</h6>
            <div class="vm-material-warp">
              <h5>{{ item.cPartName }}</h5>
              <div class="vm-item-material">
                <div class="vm-item-l">
                  <img src="../../../static/images/box.png" alt="">
                </div>
                <div class="vm-item-r">
                  <p>
                    <span>部位编号：</span>
                    <em>{{ item.cPartCode }}</em>
                  </p>
                  <p>
                    <span>部位名称：</span>
                    <em>{{ item.cPartName }}</em>
                  </p>
                  <p>
                    <span>部位责任人：</span>
                    <em>{{ item.realname }}</em>
                  </p>
                </div>
              </div>
            </div>
          </li>
        </ul>

        <!-- 项目详情 -->
        <ul class="vm-notice-warp" v-if="objtype == '项目详情'">
          <li>
            <h6>工程编码</h6>
            <p>{{ commonDetailsData.cProductCode }}</p>
          </li>
          <li>
            <h6>工程名称</h6>
            <p>{{ commonDetailsData.cProductName }}</p>
          </li>
          <li>
            <h6>责任人</h6>
            <p>{{ commonDetailsData.realname }}</p>
          </li>
          <li>
            <h6>责任人电话</h6>
            <p>{{ commonDetailsData.cContactPhone }}</p>
          </li>
          <li>
            <h6>业务类型</h6>
            <p>{{ commonDetailsData.cBusinessTypeName }}</p>
          </li>
          <li>
            <h6>业务属性</h6>
            <p>{{ commonDetailsData.cProductNatureName }}</p>
          </li>
          <li>
            <h6>状态</h6>
            <p v-if="commonDetailsData.ichecked == 0">未审核</p>
            <p v-if="commonDetailsData.ichecked == 1">已审核</p>
            <p v-if="commonDetailsData.ichecked == 77">审核中</p>
            <p v-if="commonDetailsData.ichecked == 88">审核不通过</p>
          </li>
          <li>
            <h6>地域</h6>
            <p>{{ commonDetailsData.caddress }}</p>
          </li>
          <li>
            <h6>建设单位</h6>
            <p>{{ commonDetailsData.cConUnitName }}</p>
          </li>
          <li>
            <h6>负责人</h6>
            <p>{{ commonDetailsData.cFirstPpartyPerson }}</p>
          </li>
          <li>
            <h6>联系方式</h6>
            <p>{{ commonDetailsData.cFirpartyPersonTel }}</p>
          </li>
          <li>
            <h6>设计单位</h6>
            <p>{{ commonDetailsData.cDesnCompanyName }}</p>
          </li>
          <li>
            <h6>负责人</h6>
            <p>{{ commonDetailsData.cDesCompanyPerson }}</p>
          </li>
          <li>
            <h6>联系方式</h6>
            <p>{{ commonDetailsData.cDesCompanyTel }}</p>
          </li>
          <li>
            <h6>工程监理</h6>
            <p>{{ commonDetailsData.cEngiSupUnitName }}</p>
          </li>
          <li>
            <h6>负责人</h6>
            <p>{{ commonDetailsData.cEngiSupUnitPerson }}</p>
          </li>
          <li>
            <h6>联系方式</h6>
            <p>{{ commonDetailsData.cEngiSupUnitTel }}</p>
          </li>
          <li>
            <h6>投资监理</h6>
            <p>{{ commonDetailsData.cInvestmentName }}</p>
          </li>
          <li>
            <h6>负责人</h6>
            <p>{{ commonDetailsData.cInvestmentPerson }}</p>
          </li>
          <li>
            <h6>联系方式</h6>
            <p>{{ commonDetailsData.cInvestmentTel }}</p>
          </li>
          <li class="vm-material" v-for="(item, key) in commonDetailsData.part" :key="key">
            <h6>部位信息</h6>
            <div class="vm-material-warp">
              <h5>{{ item.cPartName }}</h5>
              <div class="vm-item-material">
                <div class="vm-item-l">
                  <img src="../../../static/images/box.png" alt="">
                </div>
                <div class="vm-item-r">
                  <p>
                    <span>部位编号：</span>
                    <em>{{ item.cPartCode }}</em>
                  </p>
                </div>
              </div>
            </div>
          </li>
        </ul>

        <!-- 项目管理 -->
        <ul class="vm-notice-warp" v-if="objtype == '项目管理'">
          <li>
            <h6>工程编码</h6>
            <p>{{ commonDetailsData.cProductCode }}</p>
          </li>
          <li>
            <h6>工程名称</h6>
            <p>{{ commonDetailsData.cProductName }}</p>
          </li>
          <li>
            <h6>责任人</h6>
            <p>{{ commonDetailsData.realname }}</p>
          </li>
          <li>
            <h6>责任人电话</h6>
            <p>{{ commonDetailsData.cContactPhone }}</p>
          </li>
          <li>
            <h6>业务类型</h6>
            <p>{{ commonDetailsData.cBusinessTypeName }}</p>
          </li>
          <li>
            <h6>业务属性</h6>
            <p>{{ commonDetailsData.cProductNatureName }}</p>
          </li>
          <li>
            <h6>状态</h6>
            <p v-if="commonDetailsData.ichecked == 0">未审核</p>
            <p v-if="commonDetailsData.ichecked == 1">已审核</p>
            <p v-if="commonDetailsData.ichecked == 77">审核中</p>
            <p v-if="commonDetailsData.ichecked == 88">审核不通过</p>
          </li>
          <li>
            <h6>地域</h6>
            <p>{{ commonDetailsData.caddress }}</p>
          </li>
          <li>
            <h6>建设单位</h6>
            <p>{{ commonDetailsData.cConUnitName }}</p>
          </li>
          <li>
            <h6>负责人</h6>
            <p>{{ commonDetailsData.cFirstPpartyPerson }}</p>
          </li>
          <li>
            <h6>联系方式</h6>
            <p>{{ commonDetailsData.cFirpartyPersonTel }}</p>
          </li>
          <li>
            <h6>设计单位</h6>
            <p>{{ commonDetailsData.cDesnCompanyName }}</p>
          </li>
          <li>
            <h6>负责人</h6>
            <p>{{ commonDetailsData.cDesCompanyPerson }}</p>
          </li>
          <li>
            <h6>联系方式</h6>
            <p>{{ commonDetailsData.cDesCompanyTel }}</p>
          </li>
          <li>
            <h6>工程监理</h6>
            <p>{{ commonDetailsData.cEngiSupUnitName }}</p>
          </li>
          <li>
            <h6>负责人</h6>
            <p>{{ commonDetailsData.cEngiSupUnitPerson }}</p>
          </li>
          <li>
            <h6>联系方式</h6>
            <p>{{ commonDetailsData.cEngiSupUnitTel }}</p>
          </li>
          <li>
            <h6>投资监理</h6>
            <p>{{ commonDetailsData.cInvestmentName }}</p>
          </li>
          <li>
            <h6>负责人</h6>
            <p>{{ commonDetailsData.cInvestmentPerson }}</p>
          </li>
          <li>
            <h6>联系方式</h6>
            <p>{{ commonDetailsData.cInvestmentTel }}</p>
          </li>
          <li class="vm-material" v-for="(item, key) in commonDetailsData.part" :key="key">
            <h6>部位信息</h6>
            <div class="vm-material-warp">
              <h5>{{ item.cPartName }}</h5>
              <div class="vm-item-material">
                <div class="vm-item-l">
                  <img src="../../../static/images/box.png" alt="">
                </div>
                <div class="vm-item-r">
                  <p>
                    <span>部位编号：</span>
                    <em>{{ item.cPartCode }}</em>
                  </p>
                </div>
              </div>
            </div>
          </li>
        </ul>

        <!-- 物料详情 -->
        <ul class="vm-notice-warp" v-if="objtype == '物料详情'">
          <li>
            <h6>物料编码</h6>
            <p>{{ commonDetailsData.cInventoryCode }}</p>
          </li>
          <li>
            <h6>物料名称</h6>
            <p>{{ commonDetailsData.cInventoryName }}</p>
          </li>
          <li>
            <h6>规格型号</h6>
            <p>{{ commonDetailsData.cInvStd }}</p>
          </li>
          <li>
            <h6>物资分类</h6>
            <p>{{ commonDetailsData.cInvClassName }}</p>
          </li>
          <li>
            <h6>主计量单位</h6>
            <p>{{ commonDetailsData.cUnitID }}</p>
          </li>
          <li v-for="list in commonDetailsData.aunt" :key="key">
            <h6>辅计量单位</h6>
            <p>{{ list.name }}</p>
          </li>
          <li>
            <h6>条形码</h6>
            <p v-if="commonDetailsData.bIsBarCode == 1">不需要</p>
            <p v-else>需要</p>
          </li>
        </ul>

        <!-- 需求计划管理 -->
        <ul class="vm-notice-warp" v-if="objtype == '需求计划管理'">
          <li>
            <h6>需求单号</h6>
            <p>{{ commonDetailsData.cDocumentNumber }}</p>
          </li>
          <li>
            <h6>关联项目</h6>
            <p>{{ commonDetailsData.cProductName }}</p>
          </li>
          <li>
            <h6>关联部位</h6>
            <p>{{ commonDetailsData.cPartName }}</p>
          </li>
          <li>
            <h6>申请人</h6>
            <p>{{ commonDetailsData.cRealName }}</p>
          </li>
          <li>
            <h6>制表日期</h6>
            <p>{{ commonDetailsData.dCreateDate }}</p>
          </li>
          <li class="vm-material" v-for="(item, key) in commonDetailsData.matrial" :key="key">
            <h6>采购物资</h6>
            <div class="vm-material-warp">
              <h5>{{ item.cInventoryName }}</h5>
              <div class="vm-item-material">
                <div class="vm-item-l">
                  <img src="../../../static/images/box.png" alt="">
                </div>
                <div class="vm-item-r">
                  <p>
                    <span>物料编码：</span>
                    <em>{{ item.cInventoryCode }}</em>
                  </p>
                  <p>
                    <span>规格</span>
                    <em>{{ item.cInvStd }}</em>
                  </p>
                  <p>
                    <span>数量</span>
                    <em>{{ item.iNumber }}</em>
                  </p>
                </div>
              </div>
            </div>
          </li>
        </ul>

        <!-- 采购计划详情 -->
        <ul class="vm-notice-warp" v-if="objtype == '采购计划详情'">
          <li>
            <h6>计划单号</h6>
            <p>{{ commonDetailsData.cPOCode }}</p>
          </li>
          <li>
            <h6>计划名称</h6>
            <p>{{ commonDetailsData.Plan_name }}</p>
          </li>
          <li>
            <h6>采购部门</h6>
            <p>{{ commonDetailsData.cDepName }}</p>
          </li>
          <li>
            <h6>负责人</h6>
            <p>{{ commonDetailsData.cRealName }}</p>
          </li>
          <li>
            <h6>添加日期</h6>
            <p>{{ commonDetailsData.dAuditTime }}</p>
          </li>
          <li class="vm-material" v-for="(item, key) in commonDetailsData.matrial" :key="key">
            <h6>采购物资</h6>
            <div class="vm-material-warp">
              <h5>{{ item.cInventoryName }}</h5>
              <div class="vm-item-material">
                <div class="vm-item-l">
                  <img src="../../../static/images/box.png" alt="">
                </div>
                <div class="vm-item-r">
                  <p>
                    <span>物料编码：</span>
                    <em>{{ item.cInventoryCode }}</em>
                  </p>
                  <p>
                    <span>规格</span>
                    <em>{{ item.cInvStd }}</em>
                  </p>
                  <p>
                    <span>数量</span>
                    <em>{{ item.cQuentity }}</em>
                  </p>
                </div>
              </div>
            </div>
          </li>
        </ul>

        <!-- 采购方案管理 -->
        <ul class="vm-notice-warp" v-if="objtype == '采购方案详情'">
          <li>
            <h6>方案单号</h6>
            <p>{{ commonDetailsData.cSCCode }}</p>
          </li>
          <li>
            <h6>方案名称</h6>
            <p>{{ commonDetailsData.vSchemeName }}</p>
          </li>
          <li>
            <h6>采购部门</h6>
            <p>{{ commonDetailsData.cDepName }}</p>
          </li>
          <li>
            <h6>负责人</h6>
            <p>{{ commonDetailsData.cRealName }}</p>
          </li>
          <li>
            <h6>添加日期</h6>
            <p>{{ commonDetailsData.dCreateTime }}</p>
          </li>
          <li>
            <h6>采购方式</h6>
            <p>{{ commonDetailsData.typename }}</p>
          </li>
          <li class="vm-material" v-for="(item, key) in commonDetailsData.matrial" :key="key">
            <h6>采购物资</h6>
            <div class="vm-material-warp">
              <h5>{{ item.cInventoryName }}</h5>
              <div class="vm-item-material">
                <div class="vm-item-l">
                  <img src="../../../static/images/box.png" alt="">
                </div>
                <div class="vm-item-r">
                  <p>
                    <span>物料编码：</span>
                    <em>{{ item.cInventoryCode }}</em>
                  </p>
                  <p>
                    <span>规格</span>
                    <em>{{ item.cInvStd }}</em>
                  </p>
                  <p>
                    <span>数量</span>
                    <em>{{ item.enableNum }}</em>
                  </p>
                </div>
              </div>
            </div>
          </li>
        </ul>

        <!-- 合同审批 -->
        <ul class="vm-notice-warp" v-if="objtype == '合同审批'">
          <li>
            <h6>合同编号</h6>
            <p>{{ commonDetailsData.contractCode }}</p>
          </li>
          <li>
            <h6>合同标题</h6>
            <p>{{ commonDetailsData.contractTitle }}</p>
          </li>
          <li>
            <h6>合同类型</h6>
            <p>{{ commonDetailsData.contractTypeName }}</p>
          </li>
          <li>
            <h6>甲方</h6>
            <p>{{ commonDetailsData.aName }}</p>
          </li>
          <li>
            <h6>乙方</h6>
            <p>{{ commonDetailsData.bName }}</p>
          </li>
          <li>
            <h6>状态</h6>
            <p v-if="commonDetailsData.iStatus == 77">审核中</p>
            <p v-if="commonDetailsData.iStatus == 88">审核不通过</p>
            <p v-if="commonDetailsData.iStatus == 0">已删除</p>
            <p v-if="commonDetailsData.iStatus == 1">新增合同</p>
            <p v-if="commonDetailsData.iStatus == 2">审核通过</p>
            <p v-if="commonDetailsData.iStatus == 3">审核通过</p>
            <p v-if="commonDetailsData.iStatus == 4">审核意见为:重新修改正</p>
          </li>
          <li>
            <h6>添加日期</h6>
            <p>{{ commonDetailsData.signDate }}</p>
          </li>
          <li>
            <h6>采购金额</h6>
            <p>{{ commonDetailsData.totalAmount }}（元）</p>
          </li>
          <li class="vm-material" v-for="(item, key) in commonDetailsData.matrial" :key="key">
            <h6>采购物资</h6>
            <div class="vm-material-warp">
              <h5>{{ item.cInventoryName }}</h5>
              <div class="vm-item-material">
                <div class="vm-item-l">
                  <img src="../../../static/images/box.png" alt="">
                </div>
                <div class="vm-item-r">
                  <p>
                    <span>物料编码：</span>
                    <em>{{ item.cInventoryCode }}</em>
                  </p>
                  <p>
                    <span>规格：</span>
                    <em>{{ item.cInvStd }}</em>
                  </p>
                  <p>
                    <span>数量：</span>
                    <em>{{ item.cQuentity }}</em>
                  </p>
                </div>
              </div>
            </div>
          </li>
          <li>
            <h6>付款金额</h6>
            <p>{{ commonDetailsData.totalAmount }}（元）</p>
          </li>
          <li>
            <h6>预计付款时间：</h6>
            <p>{{ commonDetailsData.pay_date }}（元）</p>
          </li>
          <li>
            <h6>付款备注：</h6>
            <p>{{ commonDetailsData.nBeizhu }}</p>
          </li>
        </ul>

        <!-- 到货审批 -->
        <ul class="vm-notice-warp" v-if="objtype == '到货审批'">
          <li>
            <h6>到货单号</h6>
            <p>{{ commonDetailsData.order_id }}</p>
          </li>
          <li>
            <h6>到货类型</h6>
            <p>{{ commonDetailsData.order_type }}</p>
          </li>
          <li>
            <h6>关联编号</h6>
            <p>{{ commonDetailsData.contract_id }}</p>
          </li>
          <li>
            <h6>供应商名称</h6>
            <p>{{ commonDetailsData.vendername }}</p>
          </li>
          <li>
            <h6>物流名称</h6>
            <p>{{ commonDetailsData.logistice_name }}</p>
          </li>
          <li>
            <h6>物流编号</h6>
            <p>{{ commonDetailsData.logistice_code }}</p>
          </li>
          <li>
            <h6>到货日期</h6>
            <p>{{ commonDetailsData.arrival_date }}</p>
          </li>
          <li>
            <h6>是否质检</h6>
            <p v-if="commonDetailsData.is_quality == 1">是</p>
            <p v-if="commonDetailsData.is_quality == 0">否</p>
          </li>
          <li>
            <h6>制单人</h6>
            <p>{{ commonDetailsData.username }}</p>
          </li>
          <li>
            <h6>状态</h6>
            <p v-if="commonDetailsData.istatus == 0">未审批</p>
            <p v-if="commonDetailsData.istatus == 1">已审批</p>
          </li>
          <li class="vm-material" v-for="(item, key) in commonDetailsData.data_list" :key="key">
            <h6>采购物资</h6>
            <div class="vm-material-warp">
              <h5>{{ item.wzname }}</h5>
              <div class="vm-item-material">
                <div class="vm-item-l">
                  <img src="../../../static/images/box.png" alt="">
                </div>
                <div class="vm-item-r">
                  <p>
                    <span>物料编码：</span>
                    <em>{{ item.wzcode }}</em>
                  </p>
                  <p>
                    <span>规格</span>
                    <em>{{ item.models }}</em>
                  </p>
                  <p>
                    <span>数量</span>
                    <em>{{ item.nums }}</em>
                  </p>
                </div>
              </div>
            </div>
          </li>
        </ul>

        <!-- 待检审批 -->
        <ul class="vm-notice-warp" v-if="objtype == '待检审批'">
          <li>
            <h6>待检单号</h6>
            <p>{{ commonDetailsData.waiting_area_number }}</p>
          </li>
          <li>
            <h6>关联到货单号</h6>
            <p>{{ commonDetailsData.order_id }}</p>
          </li>
          <li>
            <h6>供应商名称</h6>
            <p>{{ commonDetailsData.companyName }}</p>
          </li>
          <li>
            <h6>到货日期</h6>
            <p>{{ commonDetailsData.card_make_time }}</p>
          </li>
          <li>
            <h6>制单人</h6>
            <p>{{ commonDetailsData.userName }}</p>
          </li>
          <li>
            <h6>状态</h6>
            <p v-if="commonDetailsData.istatus == 1">审批</p>
            <p v-if="commonDetailsData.istatus == 0">未审批</p>
          </li>
          <li class="vm-material" v-for="(item, key) in commonDetailsData.matrial" :key="key">
            <h6>采购物资</h6>
            <div class="vm-material-warp">
              <h5>{{ item.wzname }}</h5>
              <div class="vm-item-material">
                <div class="vm-item-l">
                  <img src="../../../static/images/box.png" alt="">
                </div>
                <div class="vm-item-r">
                  <p>
                    <span>物料编码：</span>
                    <em>{{ item.wzcode }}</em>
                  </p>
                  <p>
                    <span>规格</span>
                    <em>{{ item.models }}</em>
                  </p>
                  <p>
                    <span>数量</span>
                    <em>{{ item.nums }}</em>
                  </p>
                </div>
              </div>
            </div>
          </li>
        </ul>

        <!-- 质检审批 -->
        <ul class="vm-notice-warp" v-if="objtype == '质检审批'">
          <li>
            <h6>质检单号</h6>
            <p>{{ commonDetailsData.quality_inspection_number }}</p>
          </li>
          <li>
            <h6>关联待检单号</h6>
            <p>{{ commonDetailsData.waiting_area_number }}</p>
          </li>
          <li>
            <h6>供应商名称</h6>
            <p>{{ commonDetailsData.companyName }}</p>
          </li>
          <li>
            <h6>质检时间</h6>
            <p>{{ commonDetailsData.inspection_time }}</p>
          </li>
          <li>
            <h6>制单人</h6>
            <p>{{ commonDetailsData.single_persons }}</p>
          </li>
          <li>
            <h6>质检员</h6>
            <p>{{ commonDetailsData.inspection_names }}</p>
          </li>
          <li>
            <h6>状态</h6>
            <p v-if="commonDetailsData.istatus == 0">未审批</p>
            <p v-if="commonDetailsData.istatus == 1">审核</p>
          </li>
          <li class="vm-material" v-for="(item, key) in commonDetailsData.matrial" :key="key">
            <h6>采购物资</h6>
            <div class="vm-material-warp">
              <h5>{{ item.wzname }}</h5>
              <div class="vm-item-material">
                <div class="vm-item-l">
                  <img src="../../../static/images/box.png" alt="">
                </div>
                <div class="vm-item-r">
                  <p>
                    <span>物料编码：</span>
                    <em>{{ item.wzcode }}</em>
                  </p>
                  <p>
                    <span>规格</span>
                    <em>{{ item.models }}</em>
                  </p>
                  <p>
                    <span>数量</span>
                    <em>{{ item.numAll }}</em>
                  </p>
                </div>
              </div>
            </div>
          </li>
        </ul>

        <!-- 退货单详情 -->
        <ul class="vm-notice-warp" v-if="objtype == '退货审批'">
          <li>
            <h6>退货单号</h6>
            <p>{{ commonDetailsData.return_slip_number }}</p>
          </li>
          <li>
            <h6>关联质检单号</h6>
            <p>{{ commonDetailsData.contract_id }}</p>
          </li>
          <li>
            <h6>供应商名称</h6>
            <p>{{ commonDetailsData.companyName }}</p>
          </li>
          <li>
            <h6>退货日期</h6>
            <p>{{ commonDetailsData.return_slip_time }}</p>
          </li>
          <li>
            <h6>制单人</h6>
            <p>{{ commonDetailsData.single_persons }}</p>
          </li>
          <li>
            <h6>质检员</h6>
            <p>{{ commonDetailsData.inspection_name }}</p>
          </li>
          <li>
            <h6>状态</h6>
            <p>已审核</p>
          </li>
          <li>
            <h6>退货原因</h6>
            <p>{{ commonDetailsData.return_slip_reson }}</p>
          </li>
          <li class="vm-material" v-for="(item, key) in commonDetailsData.matrial" :key="key">
            <h6>采购物资</h6>
            <div class="vm-material-warp">
              <h5>{{ item.wzname }}</h5>
              <div class="vm-item-material">
                <div class="vm-item-l">
                  <img src="../../../static/images/box.png" alt="">
                </div>
                <div class="vm-item-r">
                  <p>
                    <span>物料编码：</span>
                    <em>{{ item.wzcode }}</em>
                  </p>
                  <p>
                    <span>规格</span>
                    <em>{{ item.models }}</em>
                  </p>
                  <p>
                    <span>数量</span>
                    <em>{{ item.nums }}</em>
                  </p>
                </div>
              </div>
            </div>
          </li>
        </ul>

        <!-- 仓库详情 -->
        <ul class="vm-notice-warp" v-if="objtype == '仓库详情'">
          <li>
            <h6>仓库编号</h6>
            <p>{{ commonDetailsData.cinventorycode }}</p>
          </li>
          <li>
            <h6>仓库名称</h6>
            <p>{{ commonDetailsData.name }}</p>
          </li>
          <li>
            <h6>电话</h6>
            <p>{{ commonDetailsData.date }}</p>
          </li>
          <li>
            <h6>负责人</h6>
            <p>{{ commonDetailsData.cRealName }}</p>
          </li>
          <li>
            <h6>仓库地址</h6>
            <p v-if="commonDetailsData.isstate == 1">审核</p>
          </li>
          <li>
            <h6>备注</h6>
            <p>{{ commonDetailsData.remark }}</p>
          </li>
          <li class="vm-material" v-for="(item, key) in commonDetailsData.matrial" :key="key">
            <h6>采购物资</h6>
            <div class="vm-material-warp">
              <h5>{{ item.cinventoryname }}</h5>
              <div class="vm-item-material">
                <div class="vm-item-l">
                  <img src="../../../static/images/box.png" alt="">
                </div>
                <div class="vm-item-r">
                  <p>
                    <span>物料编码：</span>
                    <em>{{ item.cInventoryCode }}</em>
                  </p>
                  <p>
                    <span>货位号</span>
                    <em>{{ item.shelfcode }}</em>
                  </p>
                  <p>
                    <span>规格</span>
                    <em>{{ item.cInvStd }}</em>
                  </p>
                  <p>
                    <span>库存数量</span>
                    <em>{{ item.stock_number }}</em>
                  </p>
                  <p>
                    <span>实盘数量</span>
                    <em>{{ item.actual_number }}</em>
                  </p>
                  <p>
                    <span>亏盈数量</span>
                    <em>{{ item.profit_loss_number }}</em>
                  </p>
                </div>
              </div>
            </div>
          </li>
        </ul>

        <!-- 仓库盘点审批 -->
        <ul class="vm-notice-warp" v-if="objtype == '仓库盘点审批'">
          <li>
            <h6>盘点单号</h6>
            <p>{{ commonDetailsData.code }}</p>
          </li>
          <li>
            <h6>盘点仓库</h6>
            <p>{{ commonDetailsData.name }}</p>
          </li>
          <li>
            <h6>盘点日期</h6>
            <p>{{ commonDetailsData.date }}</p>
          </li>
          <li>
            <h6>盘点人</h6>
            <p>{{ commonDetailsData.cRealName }}</p>
          </li>
          <li>
            <h6>状态</h6>
            <p v-if="commonDetailsData.isstate == 1">审核</p>
            <p v-if="commonDetailsData.isstate == 0">未审核</p>
          </li>
          <li>
            <h6>备注</h6>
            <p>{{ commonDetailsData.remark }}</p>
          </li>
          <li class="vm-material" v-for="(item, key) in commonDetailsData.matrial" :key="key">
            <h6>采购物资</h6>
            <div class="vm-material-warp">
              <h5>{{ item.cinventoryname }}</h5>
              <div class="vm-item-material">
                <div class="vm-item-l">
                  <img src="../../../static/images/box.png" alt="">
                </div>
                <div class="vm-item-r">
                  <p>
                    <span>物料编码：</span>
                    <em>{{ item.cInventoryCode }}</em>
                  </p>
                  <p>
                    <span>货位号</span>
                    <em>{{ item.shelfcode }}</em>
                  </p>
                  <p>
                    <span>规格</span>
                    <em>{{ item.cInvStd }}</em>
                  </p>
                  <p>
                    <span>库存数量</span>
                    <em>{{ item.stock_number }}</em>
                  </p>
                  <p>
                    <span>实盘数量</span>
                    <em>{{ item.actual_number }}</em>
                  </p>
                  <p>
                    <span>亏盈数量</span>
                    <em>{{ item.profit_loss_number }}</em>
                  </p>
                </div>
              </div>
            </div>
          </li>
        </ul>

        <!-- 仓库调拨审批 -->
        <ul class="vm-notice-warp" v-if="objtype == '仓库调拨审批'">
          <li>
            <h6>调拨单号</h6>
            <p>{{ commonDetailsData.code }}</p>
          </li>
          <li>
            <h6>转出仓库</h6>
            <p>{{ commonDetailsData.start_warehousename }}</p>
          </li>
          <li>
            <h6>转入仓库</h6>
            <p>{{ commonDetailsData.end_warehousename }}</p>
          </li>
          <li>
            <h6>负责人</h6>
            <p>{{ commonDetailsData.cRealName }}</p>
          </li>
          <li>
            <h6>状态</h6>
            <p v-if="commonDetailsData.isstate == 1">审核</p>
            <p v-if="commonDetailsData.isstate == 0">未审核</p>
          </li>
          <li>
            <h6>调拨日期</h6>
            <p>{{ commonDetailsData.time }}</p>
          </li>
          <li>
            <h6>备注</h6>
            <p>从九头鸟仓库向西二旗仓库，调拨物资，应对上级检查</p>
          </li>
          <li class="vm-material" v-for="(item, key) in commonDetailsData.matrial" :key="key">
            <h6>采购物资</h6>
            <div class="vm-material-warp">
              <h5>{{ item.cinventoryname }}</h5>
              <div class="vm-item-material">
                <div class="vm-item-l">
                  <img src="../../../static/images/box.png" alt="">
                </div>
                <div class="vm-item-r">
                  <p>
                    <span>物料编码：</span>
                    <em>{{ item.cinventorycode }}</em>
                  </p>
                  <p>
                    <span>规格</span>
                    <em>{{ item.cInvMnemCode }}</em>
                  </p>
                  <p>
                    <span>库存数量</span>
                    <em>{{ item.num }}</em>
                  </p>
                  <p>
                    <span>转出货位：</span>
                    <em>{{ item.start_shelfrname }}</em>
                  </p>
                  <p>
                    <span>转入货位：</span>
                    <em>{{ item.end_shelfrname }}</em>
                  </p>
                  <p>
                    <span>调拨数量：</span>
                    <em>{{ item.remark }}</em>
                  </p>
                </div>
              </div>
            </div>
          </li>
        </ul>

        <!-- 入库审批 -->
        <ul class="vm-notice-warp" v-if="objtype == '入库审批'">
          <li>
            <h6>入库单号</h6>
            <p>{{ commonDetailsData.rk_code }}</p>
          </li>
          <li>
            <h6>入库仓库</h6>
            <p>{{ commonDetailsData.ckname }}</p>
          </li>
          <li>
            <h6>入库类型</h6>
            <p>{{ commonDetailsData.instatus }}</p>
          </li>
          <li>
            <h6>关联单据号</h6>
            <p>{{ commonDetailsData.order_code }}</p>
          </li>
          <li>
            <h6>质检单号</h6>
            <p>{{ commonDetailsData.orderid }}</p>
          </li>
          <li>
            <h6>入库日期</h6>
            <p>{{ commonDetailsData.careattime }}</p>
          </li>
          <li>
            <h6>状态</h6>
            <p v-if="commonDetailsData.isstate == 0">未审核</p>
            <p v-else-if="commonDetailsData.isstate == 1">审核</p>
          </li>
          <li class="vm-material" v-for="(item, key) in commonDetailsData.matrial" :key="key">
            <h6>采购物资</h6>
            <div class="vm-material-warp">
              <h5>{{ item.cInventoryName }}</h5>
              <div class="vm-item-material">
                <div class="vm-item-l">
                  <img src="../../../static/images/box.png" alt="">
                </div>
                <div class="vm-item-r">
                  <p>
                    <span>物料编码：</span>
                    <em>{{ item.cInventoryCode }}</em>
                  </p>
                  <p>
                    <span>规格</span>
                    <em>{{ item.cInvStd }}</em>
                  </p>
                  <p>
                    <span>数量</span>
                    <em>{{ item.nums }}</em>
                  </p>
                </div>
              </div>
            </div>
          </li>
        </ul>

        <!-- 出库审批 -->
        <ul class="vm-notice-warp" v-if="objtype == '出库审批'">
          <li>
            <h6>出库单号</h6>
            <p>{{ commonDetailsData.rk_code }}</p>
          </li>
          <li>
            <h6>出库仓库</h6>
            <p>{{ commonDetailsData.ckname }}</p>
          </li>
          <li>
            <h6>出库类型</h6>
            <p>{{ commonDetailsData.ckname }}</p>
          </li>
          <li>
            <h6>关联单据号</h6>
            <p>{{ commonDetailsData.orderid }}</p>
          </li>
          <li>
            <h6>制单人</h6>
            <p>{{ commonDetailsData.autoname }}</p>
          </li>
          <li>
            <h6>出库日期</h6>
            <p>{{ commonDetailsData.audit_time }}</p>
          </li>
          <li>
            <h6>状态</h6>
            <p v-if="commonDetailsData.isstate == 1">已审核</p>
            <p v-else-if="commonDetailsData.isstate == 0">未审核</p>
          </li>
          <li class="vm-material" v-for="(item, key) in commonDetailsData.matrail" :key="key">
            <h6>采购物资</h6>
            <div class="vm-material-warp">
              <h5>{{ item.cInventoryName }}</h5>
              <div class="vm-item-material">
                <div class="vm-item-l">
                  <img src="../../../static/images/box.png" alt="">
                </div>
                <div class="vm-item-r">
                  <p>
                    <span>物料编码：</span>
                    <em>{{ item.cInventoryCode }}</em>
                  </p>
                  <p>
                    <span>规格</span>
                    <em>{{ item.cInvStd }}</em>
                  </p>
                  <p>
                    <span>数量</span>
                    <em>{{ item.nums }}</em>
                  </p>
                </div>
              </div>
            </div>
          </li>
        </ul>

        <!-- 公告页面 -->
        <ul class="vm-notice-warp"
            v-if="objtype == '询价审批' || objtype == '单一来源审批' || objtype == '竞价审核公告' || objtype == '审核公告' || objtype == '谈判审批' || objtype == '公告详情'|| objtype == '采购公告详情' ">
          <li>
            <h6>招标编号</h6>
            <p>{{ commonDetailsData.cProductCode }}</p>
          </li>
          <li>
            <h6>公告主题</h6>
            <p>{{ commonDetailsData.cIBidsTatle }}</p>
          </li>
          <li>
            <h6>责任人</h6>
            <p>{{ commonDetailsData.cRealName }}</p>
          </li>
          <li>
            <h6>公告期</h6>
            <p>{{ commonDetailsData.iAnnDay }}天</p>
          </li>
          <li>
            <h6>开标时间</h6>
            <p>{{ commonDetailsData.dOpenTime }}</p>
          </li>
          <li>
            <h6>采购方式</h6>
            <p v-if="commonDetailsData.cPOType == 1">询比价</p>
            <p v-else-if="commonDetailsData.cPOType == 2">竞争性谈判</p>
            <p v-else-if="commonDetailsData.cPOType == 3">单一来源</p>
            <p v-else-if="commonDetailsData.cPOType == 4">框架协议</p>
            <p v-else-if="commonDetailsData.cPOType == 5">竞价采购</p>
            <p v-else-if="commonDetailsData.cPOType == 6">应急采购</p>
            <p v-else-if="commonDetailsData.cPOType == 0">招投标</p>
          </li>
          <li class="vm-material" v-for="(item, key) in commonDetailsData.matrial" :key="key">
            <h6>采购物资</h6>
            <div class="vm-material-warp">
              <h5>{{ item.cInventoryName }}</h5>
              <div class="vm-item-material">
                <div class="vm-item-l">
                  <img src="../../../static/images/box.png" alt="">
                </div>
                <div class="vm-item-r">
                  <p>
                    <span>物料编码：</span>
                    <em>{{ item.cInventoryCode }}</em>
                  </p>
                  <p>
                    <span>规格</span>
                    <em>{{ item.cInvStd }}</em>
                  </p>
                  <p>
                    <span>数量</span>
                    <em>{{ item.iNumber }}</em>
                  </p>
                </div>
              </div>
            </div>
          </li>
        </ul>

        <!-- 审批按钮 -->
        <vm-common-examine-fun
          :show="btnShow"
          :btnType="btnType"
          :objType="objType"
          :detailsId="detailsId"
          :item="commonDetailsData"></vm-common-examine-fun>

        <div :class="['vm-examine-details-f',btnType != 0 ? 'n' : '']" v-if="btnShow == 'myoffer'">
          <router-link tag="button" plain v-if="btnType == 0" :to="'/common/vm_common_pretrial/' + detailsId">
            我的预审
          </router-link>
          <router-link type="primary" tag="button" :to="'/common/offer_item_details/' + detailsId">
            我的报价
          </router-link>
        </div>
      </div>
    </div>

    <!-- 审批详情弹框 -->
    <mt-popup
      v-model="popupVisible"
      position="center"
    >
      <mt-swipe
        :showIndicators="false"
        :continuous="false">
        <mt-swipe-item>
          <div class="examinee-process-warp" v-for="(item, key) in workflowrecord" :key="key">
            <div class="examinee-process-h">
              <h6>审批编号：{{ item.wf_ids }}</h6>
              <span @click="popupVisible = !popupVisible;">X</span>
            </div>
            <div class="examine-process-b">
              <div class="examine-process-item">
                <div class="examinee-b-l">
                  {{ item.user_text }}
                </div>
                <div class="examinee-b-r">
                  <div class="examinee-r-t">
                    <em v-if="item.opinion == 1">同意</em>
                    <em v-if="item.opinion == 2">不同意</em>
                    <span>{{ item.created_time }}</span>
                  </div>
                  <div class="examinee-r-b">
                    <p>{{ item.description }}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </mt-swipe-item>
      </mt-swipe>
    </mt-popup>

    <!-- 审批弹框 -->
    <mt-popup
      v-model="examine"
      position="bottom"
      class="vm-examine-warp">
      <div class="examine-warp">
        <div class="examine-t">
          <i class="vm-icon examine"></i>
          <h5>审核</h5>
        </div>
        <div class="examine-b">
          <div class="examine-b-btn">
            <mt-button :class="[{'active': isActive1}]" type="danger" @click="isActive1 = true;isActive2 = false;">通过
            </mt-button>
            <mt-button :class="[{'active': isActive2}]" size="small" @click="isActive2 = true;isActive1 = false;">不通过
            </mt-button>
          </div>
          <div class="examine-b-con">
            <div class="examine-b-con-reason">
              <i class="vm-icon reason"></i>
              <h5>原因</h5>
            </div>
            <input type="text" v-model="reasonData" class="examine-b-con-reason" placeholder="请输入内容">
          </div>

        </div>
        <div class="examine-f">
          <mt-button type="danger" @click="submitExamine">提交</mt-button>
        </div>
      </div>
    </mt-popup>
  </div>
</template>

<script>
  import vmCommonHeader from '@/components/vm-common-header.vue'
  import vmCommonExamineFun from '@/components/vm-common-examineFun.vue'
  import {checkuserstat, doworkflow, getworkflowrecord, updatestate} from '@/api/examine.js'
  import {
    progamedetail,
    getNoticedetailData,
    contractdetail,
    addarrivalorderdetail,
    addwaitingareadetail,
    qualityinspectiondetail,
    addreturnslipdetail,
    inventorydetail,
    allocationsdetail,
    warehousindetail,
    venderdetail,
    publicityDetail,
    incentorydetail,
    index_projectInfo,
    plan_procurementdetails,
    plan_schemedetails,
    Putinhouse_outstockdetail,
    warehouse_showStock,
    device_Devicedetail
  } from '@/api/vm-common-details.js'

  export default {
    data() {
      return {
        objtype: this.$route.params.objtype, // 项目类型 -> 中文
        goBack: this.$route.meta.goBack, // 是否显示返回按钮
        detailsId: this.$route.params.id, // 详情id
        commonDetailsData: new Object(), // 详情数据
        btnType: this.$route.query.type,
        btnShow: this.$route.query.btn ? this.$route.query.btn : null, // 是否显示审批详情、审批按钮
        objType: this.$route.query.objType, //  项目类型 -> 英文
        popupVisible: false, // 审批详情弹框
        examine: false, // 审批按钮弹框
        reasonData: '',
        isActive1: false,
        isActive2: false,
        workflowrecord: new Array(),
        prompt: this.$route.query.prompt ? JSON.parse(this.$route.query.prompt) : null, // 是否提示用户请去参与招标报价
      }
    },
    components: {
      'vm-common-header': vmCommonHeader,
      'vm-common-examine-fun': vmCommonExamineFun
    },
    created() {
      this.getdetailData();
      if (this.$route.query.btn == 'examinePage' && this.$route.query.btn !== null) {
        this.getworkflowrecordData();
      } else if (this.$route.query.btn == 'myoffer' && this.$route.query.btn !== null) {

      }
    },
    methods: {
      // 获取详情数据
      async getdetailData() {
        let objtype = this.objtype.trim();
        let that = this;
        const detailsId = this.detailsId;
        switch (objtype) {
          case '新闻详情':
            await publicityDetail(detailsId).then(res => {
              this.commonDetailsData = res.data.data;
            }).catch(err => console.log(err));
            break;
          case '物料详情':
            await incentorydetail(detailsId).then(res => {
              this.commonDetailsData = res.data.data;
            }).catch(err => console.log(err));
            break;
          case '供应商详情':
            await venderdetail(detailsId).then(res => {
              this.commonDetailsData = res.data.data;
            }).catch(err => console.log(err));
            break;
          case '需求计划管理':
            await progamedetail(detailsId).then(res => {
              this.commonDetailsData = res.data.data;
            }).catch(err => console.log(err));
            break;
          case '项目详情':
            await index_projectInfo(detailsId).then(res => {
              this.commonDetailsData = res.data.data;
            }).catch(err => console.log(err));
            break;
          case '项目管理':
            await index_projectInfo(detailsId).then(res => {
              this.commonDetailsData = res.data.data;
            }).catch(err => console.log(err));
            break;
          case '采购计划详情':
            plan_procurementdetails(detailsId).then(res => {
              this.commonDetailsData = res.data.data;
            }).catch(err => console.log(err));
            break;
          case '采购方案详情':
            plan_schemedetails(detailsId).then(res => {
              this.commonDetailsData = res.data.data;
              console.log(this.commonDetailsData);
            }).catch(err => console.log(err));
            break;
          case '合同审批':
            await contractdetail(detailsId).then(res => {
              this.commonDetailsData = res.data.data;
            }).catch(err => console.log(err));
            break;
          case '到货审批':
            await addarrivalorderdetail(detailsId).then(res => {
              this.commonDetailsData = res.data.data;
            }).catch(err => console.log(err));
            break;
          case '待检审批':
            await addwaitingareadetail(detailsId).then(res => {
              this.commonDetailsData = res.data.data;
            }).catch(err => console.log(err));
            break;
          case '质检审批':
            await qualityinspectiondetail(detailsId).then(res => {
              this.commonDetailsData = res.data.data;
            }).catch(err => console.log(err));
            break;
          case '退货审批':
            await addreturnslipdetail(detailsId).then(res => {
              this.commonDetailsData = res.data.data;
            }).catch(err => console.log(err));
            break;
          case '仓库盘点审批':
            await inventorydetail(detailsId).then(res => {
              this.commonDetailsData = res.data.data;
            }).catch(err => console.log(err));
            break;
          case '仓库调拨审批':
            await allocationsdetail(detailsId).then(res => {
              this.commonDetailsData = res.data.data;
            }).catch(err => console.log(err));
            break;
          case '入库审批':
            await warehousindetail(detailsId).then(res => {
              this.commonDetailsData = res.data.data;
            }).catch(err => console.log(err));
            break;
          case '出库审批':
            await Putinhouse_outstockdetail(detailsId).then(res => {
              this.commonDetailsData = res.data.data;
            }).catch(err => console.log(err));
            break;
          case '仓库详情':
            await warehouse_showStock(detailsId).then(res => {
              this.commonDetailsData = res.data.data;
            }).catch(err => console.log(err));
            break;
          case '设备工艺审批':
            await device_Devicedetail(detailsId).then(res => {
              this.commonDetailsData = res.data.data;
              console.log(this.commonDetailsData);
            }).catch(err => console.log(err));
            break;
          default :
            await getNoticedetailData(detailsId).then(res => {
              this.commonDetailsData = res.data.data;
            }).catch(err => console.log(err));
            break;
        }
      },
      // 点击审批，查看是否有审批权限
      isExamine() {
        checkuserstat(this.objType, this.detailsId).then(res => {
          const isStatus = res.data;
          if (isStatus == 1) {
            this.examine = !this.examine;
          } else {
            this.$toast(isStatus);
          }
        });
      },
      // 获取审批流程
      getworkflowrecordData() {
        let objType = this.objType; // 项目类型
        let id = this.detailsId; // 单据id
        getworkflowrecord(objType, id).then(res => {
          this.workflowrecord = res.data.data;
        })
      },
      // 点击提交审批
      async submitExamine() {
        let objType = this.objType; // 项目类型
        let id = this.detailsId; // 单据id
        let opinion;
        if (!this.isActive1 && !this.isActive2) {
          this.$toast('请选择是否通过审批！')
          return;
        } else {
          opinion = this.isActive1 ? 1 : 2;
        }
        let description = this.reasonData;
        let res = await doworkflow(objType, id, opinion, description).then(res => res);

        if (res.data.data == 1 && res.data.status == 200) {
          await updatestate(objType, id).then(res => {
            if (res.data.data == 1 && res.data.status == 200) {
              this.$toast(res.data.message);
              setTimeout(() => {
                this.$router.push({
                  path: '/examine'
                });
              }, 2000);
            }
          })
        } else if (res.data.data == 2 && res.data.status == 200) {
          this.$toast('操作成功！');
          setTimeout(() => {
            this.$router.push({
              path: '/examine'
            });
          }, 2000);
        } else {
          this.$toast('操作失败！');
          setTimeout(() => {
            this.$router.push({
              path: '/examine'
            });
          }, 2000);
        }

      }
    },
    mounted() {}
  }
</script>

<style lang="scss">
  .mint-indicator-wrapper {
    z-index: 9999;
  }

  .mint-toast.is-placemiddle {
    z-index: 9999;
  }

  .vm-details-container {
    height: 100%;
    width: 100%;
    overflow: hidden;
  }

  .vm-commonDetails-container {
    height: calc(100%);
    overflow: scroll;
    .vm-header-prompt {
      background-color: #ffbd1a;
      width: 100%;
      height: 60px;
      display: flex;
      justify-content: center;
      align-items: center;
      h6 {
        font-size: 26px;
        color: #7a4811;
      }
    }
    .vm-notice-warp {
      display: flex;
      flex-direction: column;
      margin-top: 30px;
      background-color: #fff;
      li {
        margin-left: 40px;
        display: flex;
        min-height: 80px;
        align-items: center;
        border-bottom: 1px solid #eeeeee; /* no */
        text-align: left;
        h6 {
          width: 185px;
          color: #989898;
          font-size: 26px;
        }
        p {
          flex: 1;
          font-size: 26px;
          color: #000000;
        }
        &.vm-material {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          text-align: left;
          border-bottom: 1px solid #eeeeee; /* no */
          h6 {
            margin-top: 30px;
          }
          .vm-material-warp {
            margin-bottom: 30px;
            width: 100%;
            h5 {
              height: 100px;
              font-size: 28px;
              color: #000000;
              font-weight: bold;
              align-items: center;
              display: flex;
            }
            .vm-item-material {
              display: flex;
              .vm-item-l {
                margin-right: 30px;
                img {
                  max-width: 120px;
                  max-height: 120px;
                }
              }
              .vm-item-r {
                padding: 8px 0;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
              }
            }
          }
        }
      }
    }
  }

  .vm-examine-details-f {
    display: flex;
    height: 150px;
    width: 100%;
    padding: 0 30px;
    align-items: center;
    background-color: #ffffff;
    button {
      border-radius: 10px; /* no */
      height: 85px;
      flex: 1;
      font-size: 32px;
    }
    button:nth-child(1) {
      background-color: #ffffff;
      border: 2px solid #46a8fc; /* no */
      margin-right: 30px;
      color: #83c2ff;
    }
    button:nth-child(2) {
      background-color: #46a8fc;
      border: 2px solid #46a8fc; /* no */
      margin-right: 30px;
      color: #fff;
    }
    &.n {
      button {
        background-color: #46a8fc;
        border: 2px solid #46a8fc; /* no */
        margin-right: 30px;
        color: #fff;
      }
    }
  }
</style>
